<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			background: #222;
		}

		html,body,.box {

			height: 100%;

			display: flex;

			align-items: center;

			justify-content: center;

		}

		.box {
			position: relative;

			color: white;

			font-size: 2.5em;

			width: 10em;

			height: 5em;

			background: #111;

			font-family: sans-serif;

			line-height: 1.5em;

			text-align: center;

			border-radius: 0.2em;

			animation: animate_text 2s linear infinite alternate;

		}

		@keyframes animate_text {

			from {
				color: lime;

			}

			to {

				color: #ff557f;

			}

		}

		.box::after {
			position: absolute;

			content: '';
			
			top: 50%;
			
			left: 50%;
			
			transform: translate(-50%,-50%);

			width: 106%;

			height: 112%;

			background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);

			z-index: -1;

			border-radius: 0.2em;
			
		}
			
		.box::after{
			background-size: 300%, 300%;
			 
			animation: animate_bg 5s ease infinite alternate;
		}

		@keyframes animate_bg {

			0% {

				background-position: 0%, 50%;

			}


			50% {

				background-position: 100%, 50%;

			}


			100% {

				background-position: 0%, 50%;
			}

		}
	</style>
	<body>

		<div class="box">
			welcome to SUSU
		</div>

	</body>
</html>
